<template>
	<div class="tikuBg">
		
		<div class="banner">
			<image src="https://www.baixuemianshi.com/zhuanti/images/swiper_xcx2.jpg" mode="widthFix"></image>
		</div>
		
		<div class="banjiList">
			<ul class="btnList">
				<li v-for="(item,index) in moshiList" :class="item.spell" :key="index" @click="changeMoshi(item)">
					<h3>{{ item.name }}</h3>
				</li>
				<li @click="toWebview()">
					<h3>【外在手册】秋冬面试着装+礼仪手册</h3>
				</li>
				<li v-if="userinfo.limit =='老师'" @click="changePath()">
					<h3>去评分</h3>
				</li>
				<li v-if="userinfo.limit !='老师'" @click="changePingdiao()">
					<h3>学习信息评调</h3>
				</li>
			</ul>
		</div>
		
		<div class="loadBox" v-if="searchLoading">
			<u-loading-icon size="36" mode="circle" :vertical="true" color="red" text="加载中..." textSize="20"></u-loading-icon>
		</div>
		
		<canvas canvas-id="waterMark" class="waterMark" style="width: 100vw; height: 100vh;"></canvas>
		<image :src="waterMarkUrl" class="waterMark-bg" style="width: 100vw; height: 100vh;"></image>
	</div>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	const db = wx.cloud.database()
	export default {
		data() {
			return {
				waterMarkUrl: "",
				windowWidth: 100,
				windowHeight: 100,
				banjiDetail:"",
				userinfo: {},
				nolimit: false,
				limitStatus:false,
				moshiList: [
					{name: "每日练习",spell: "zuti"},
					{name: "练过的题",spell: "workend"},
					{name: "作业模式",spell: "homework"},
					{name: "小白姐私教课",spell: "sijiaoke"}
				],
				searchLoading:true,
				bInfo:{
					zbls:"",
					xbls:"",
					student:""
				}
				
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				return {
					title: `题库-学员端`, //分享标题
					path: '/pages/nbhd/tiku/student', //分享页面路径
					imageUrl: '', //分享图标
					desc: '雪恒教育-白雪面试', //自定义分享描述 
				}
			} else {
				return {
					title: `题库-学员端`, //分享标题
					path: '/pages/nbhd/tiku/student', //分享页面路径
					imageUrl: '', //分享图标
					desc: '雪恒教育-白雪面试', //自定义分享描述 
				}
			}
		},
		onLoad(options) {
			
		},
		onReady(e) {
			
		},
		onShow() {
			if(wx.setVisualEffectOnCapture){
			    wx.setVisualEffectOnCapture({
			        visualEffect: 'hidden',
			        success:(res) => {
			            console.log('success回调',res)
			        },
			    })
			}
		},
		onHide() {
			if(wx.setVisualEffectOnCapture){
			    wx.setVisualEffectOnCapture({
			        visualEffect: 'none',
			        success:(res) => {
			            console.log('success回调',res)
			        },
			    })
			}
		},
		computed: {
			userphone() {
				return this.$store.getters.userphone ? this.$store.getters.userphone : '';
			},
			selectBanji(){
				return this.$store.getters.selectBanji ? this.$store.getters.selectBanji : '';
			},
		},
		created() {
			let that = this;
			
		},
		mounted() {
			let that = this 
			that.getTimuInfo()
			wx.hideLoading()
			
			if(this.userphone){
				this.drawWaterMark(this.userphone);
			}else{
				this.drawWaterMark('雪恒教育-白雪面试');
			}
		},
		watch: {},
		methods: {
			...mapActions(['LogSetPhone','LogSetBanji']),
			drawWaterMark(text) {
				this.getDeviceInfo().then(response => {
					const w = response.windowWidth;
					const h = response.windowHeight;
					this.windowWidth = w;
					this.windowHeight = h;
					//创建canvas绘制上下文
					const canvas = uni.createCanvasContext("waterMark", this);
					canvas.clearRect(0, 0, w, h)
					//开始创建一个路径，需要调用fill或者stroke才会使用路径进行填充或描边。
					canvas.beginPath();
					canvas.setFontSize(18);
					canvas.setFillStyle('rgba(0, 0, 0, 0.1)');
					canvas.rotate(-30 * Math.PI / 180)
					if (text) {
						text = this.trim(text)
					}
					const maxWidth = text.length * 18
					for (let x = 0; x < 10; x++) {
						for (let y = 0; y < 20; y++) {
							//在画布上绘制被填充的文本。
							canvas.fillText(text, (maxWidth + 40) * x - 400, 90 * y + 20);
						}
					}
					//将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
					canvas.draw(false, () => {
						//把当前画布指定区域的内容导出生成指定大小的图片
						uni.canvasToTempFilePath({
							canvasId: "waterMark",
							complete: (res) => {
								this.waterMarkUrl = res.tempFilePath
							}
						}, this)
					})
				});
			},
			trim(str) {
				let trimStr = '';
				const reg = /[\t\r\f\n\s]*/g;
				if (typeof str === 'string') {
					trimStr = str.replace(reg, '');
				}
				return trimStr
			},
			/**
			 * 获取当前设备的信息
			 * **/
			getDeviceInfo() {
				return new Promise((resolve, reject) => {
					uni.getSystemInfo({
						success: (sysInfo) => {
							resolve(sysInfo)
						}
					})
				})
			},
			getTimuInfo(){
				let that = this
				db.collection('nbhd_tiku_banji').where({
					banji: that.selectBanji
				}).get({
					success: function(res) {
						if(res.data.length > 0){
							that.banjiDetail = res.data[0]
							that.getuserStatus()
						}else{
							uni.showToast({
								title: '暂无题目',
								icon: 'error'
							})
						}
					}
				})
			},
			getuserStatus(){
				let that = this
				db.collection('nbhd_tiku_students').where({
					phone: that.userphone,
					banji: that.selectBanji
				}).get({
					success: function(res){
						if(res.data.length > 0){
							that.userinfo = res.data[0]
						}
						that.searchLoading = false
					}
				})
			},
			changeMoshi(e){
				if(e.spell == 'zuti'){
					uni.navigateTo({
						url: './zuti_s'
					})
				}else if(e.spell == 'workend'){
					uni.navigateTo({
						url: './workend_s'
					})
				}else if(e.spell == 'homework'){
					uni.navigateTo({
						url: './homework_s'
					})
				}else{
					wx.navigateToMiniProgram({
						shortLink:this.banjiDetail.sijiaoke,
						//develop开发版；trial体验版；release正式版
						envVersion: 'release', 
						success(res) {
						  // 打开成功
						  console.log("跳转小程序成功！",res);
						} 
					})
				}
			},
			changePath(){
				uni.navigateTo({
					url: '../pingfen/index?xbls=' + this.userinfo.student
				})
			},
			changePingdiao(){
				uni.navigateTo({
					url: '../form/form2?banji=' + this.selectBanji + '&student=' + this.userinfo.student
				})
			},
			toWebview(){
				uni.navigateTo({
					url:'../../webview/index?href=' + encodeURIComponent('https://www.baixuemianshi.com/zhuanti/zzlysc/?' + new Date())
				})
			}
			
		},
		components: {
			
		}
	};
</script>

<style scoped>
	@import url(./index.css);
	.banjiList{}
	.banjiList .btnList{padding: 50rpx;}
	.banjiList .btnList li{text-align: center; padding: 20rpx 0; margin: 30rpx 0; border-radius: 100px;  background: linear-gradient(to top, #fa3534, #f56c6c); color: #fff; }
</style>